<template>
  <view class="page-wrapper">
    <my-header bgColor="bg-white" :isBack="true">
      <block slot="content">角色管理</block>
      <block slot="right">
        <image
          @click="showFun"
          class="nav-right-image"
          src="@/static/images/nav_opt.png"
        ></image>
      </block>
    </my-header>
    <view class="page-content">
      <view class="search-content">
        <view class="page-search">
          <view class="search">
            <view class="search-left">
              <image src="@/static/images/search.png" mode="aspectFit" />
            </view>
            <input
              class="search-center"
              type="text"
              placeholder="请输入角色名称"
              placeholder-class="search-placeholder"
              v-model="searchValue"
              @blur="getList(1)"
            />
          </view>
        </view>
      </view>
      <view class="content">
        <scroll-view
          class="scroll-content"
          :scroll-y="true"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          :refresher-background="'#F9F9F9'"
          @scrolltolower="onEndReached"
        >
          <uni-swipe-action>
            <view
              class="swipe-action-wrapper"
              v-for="item in dataList"
              :key="item.id"
            >
              <uni-swipe-action-item
                :right-options="rightOptions"
                @click="swipeClick(item, $event)"
              >
                <view class="role-item">
                  <view class="role-name">
                    {{ item.roleName }}
                  </view>
                  <view class="role-line">
                    <view class="role-line-label"> 角色编码 </view>
                    <view class="role-line-content">
                      {{ item.roleCode }}
                    </view>
                  </view>
                  <view class="role-line">
                    <view class="role-line-label"> 创建时间 </view>
                    <view class="role-line-content">
                      {{ item.createTime }}
                    </view>
                  </view>
                </view>
              </uni-swipe-action-item>
            </view>
          </uni-swipe-action>
        </scroll-view>
      </view>
    </view>
    <view class="fun-wrap" v-show="isShowFun" @click="hideFun">
      <view class="fun-box" :style="{ top: this.CustomBar + 'px' }">
        <view class="fun-item" @click.stop="gotoAdd">
          <image class="fun-icon" src="@/static/images/addIcon.png" />
          <text class="fun-text">新增</text>
        </view>
      </view>
    </view>
    <uni-popup ref="editPopup" background-color="#fff" :mask-click="false">
      <view class="popup-wrapper">
        <view class="popup-title"
          >{{ editRoleData.id ? "编辑" : "新增" }}角色</view
        >
        <view class="popup-content">
          <view class="form-item">
            <view class="form-item-label">角色编码</view>
            <view class="form-item-content">
              <input placeholder="角色编码" v-model="editRoleData.roleCode" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-item-label">角色名称</view>
            <view class="form-item-content">
              <input placeholder="角色名称" v-model="editRoleData.roleName" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-item-label">描述</view>
            <view class="form-item-content">
              <input placeholder="描述" v-model="editRoleData.description" />
            </view>
          </view>
        </view>
        <view class="popup-actions">
          <button class="popup-action" @click="editRoleCancel">取消</button>
          <button class="popup-action" type="primary" @click="editRoleOk">
            确定
          </button>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="deletePopup" background-color="#fff" :mask-click="false">
      <view
        style="
          text-align: center;
          background-color: #ffffff;
          padding: 11rpx;
          width: 580rpx;
          height: 470rpx;
          border-radius: 42rpx;
        "
      >
        <view class="submit-item">
          <image class="submit-icon" src="@/static/images/deleteIcon.png" />
        </view>
        <view style="margin-top: 28rpx">
          <text class="submit-text">确定删除该角色吗</text>
        </view>
        <br />
        <view
          style="display: flex; align-items: center; justify-content: center"
        >
          <button
            @click="sureDelete"
            style="
              border-radius: 20rpx;
              background-color: red;
              color: rgba(255, 255, 255, 1);
              width: 230rpx;
              margin-top: 50rpx;
            "
          >
            确定
          </button>
          <button
            @click="cancelDelete"
            style="
              border-radius: 20rpx;
              background-color: gray;
              color: rgba(255, 255, 255, 1);
              width: 230rpx;
              margin-top: 50rpx;
            "
          >
            取消
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      refreshing: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      dataList: [],
      isShowFun: false,
      editRoleData: {},
      deleteId: "",
      rightOptions: [
        {
          text: "用户",
          style: {
            backgroundColor: "#1890ff",
          },
        },
        {
          text: "授权",
          style: {
            backgroundColor: "rgb(254, 180, 63)",
          },
        },
        {
          text: "编辑",
          style: {
            backgroundColor: "#1890ff",
          },
        },
        {
          text: "删除",
          style: {
            backgroundColor: "red",
          },
        },
      ],
    };
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    getList(pageNo) {
      let params = {
        pageNo,
        pageSize: this.pageSize,
        column: "createTime",
        order: "desc",
        field: "id,,roleCode,roleName,createTime,action",
      };
      if (this.searchValue) {
        params.roleName = this.searchValue;
      }
      this.$http
        .get("/sys/role/list", {
          params,
        })
        .then((res) => {
          const data = res?.data || {};
          if (data?.success) {
            const { records, size, total, current } = data?.result || {};
            this.pageNo = current;
            this.pageSize = size;
            this.total = total;
            if (current === 1) {
              this.dataList = records;
            } else {
              this.dataList = this.dataList.concat(records);
            }
          } else {
            this.$tip.toast(data?.message);
          }
        })
        .finally(() => {
          this.refreshing = false;
        });
    },
    onRefresh() {
      this.refreshing = true;
      this.getList(1);
    },
    onEndReached() {
      if (this.pageNo * this.pageSize < this.total) {
        this.getList(this.pageNo + 1);
      }
    },
    swipeClick(item, e) {
      // e.index
      switch (e.index) {
        case 0:
          uni.navigateTo({
            url: `/pages/roleManagement/user/index?id=${item.id}`,
          });
          break;
        case 1:
          uni.navigateTo({
            url: `/pages/roleManagement/authorize/index?id=${item.id}`,
          });
          break;
        case 2:
          // 编辑
          this.editRoleData = item;
          this.$refs.editPopup.open("center");
          break;
        default:
          // 删除
          this.$refs.deletePopup.open("center");
          this.deleteId = item.id;
          break;
      }
    },

    showFun() {
      this.isShowFun = true;
    },
    hideFun() {
      this.isShowFun = false;
    },
    gotoAdd() {
      this.hideFun();
      this.$refs.editPopup.open("center");
    },
    editRoleCancel() {
      this.editRoleData = {
        roleCode: "",
        roleName: "",
        description: "",
      };
      this.$refs.editPopup.close();
    },
    async editRoleOk() {
      uni.showLoading({ title: "提交中", mask: true });
      try {
        const checkRes = await this.$http.get("/sys/duplicate/check", {
          params: {
            tableName: "sys_role",
            fieldName: "role_code",
            fieldVal: this.editRoleData?.roleCode,
            ...(this.editRoleData?.id ? { dataId: this.editRoleData?.id } : {}),
          },
        });
        if (!checkRes?.data?.success) {
          this.$tip.toast(checkRes?.data?.message);
        } else {
          const service = this.editRoleData?.id
            ? this.$http.put("/sys/role/edit", this.editRoleData)
            : this.$http.post("/sys/role/add", this.editRoleData);
          const addRes = await service;
          if (!addRes?.data?.success) {
            this.$tip.toast(addRes?.data?.message);
          } else {
            this.editRoleCancel();
            this.getList(1);
          }
        }
      } catch (error) {
        console.log(error);
      }
      uni.hideLoading();
    },
    cancelDelete() {
      this.deleteId = null;
      this.$refs.deletePopup.close();
    },
    sureDelete() {
      this.$http.delete(`/sys/role/delete?id=${this.deleteId}`).then((res) => {
        if (res?.data?.success) {
          this.cancelDelete();
          this.getList(1);
        } else {
          this.$tip.toast(res?.data?.message);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.page-content {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;

  .content {
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;

    .scroll-content {
      height: 100%;
    }
  }
}

.page-search {
  padding-left: 34rpx;
  margin-bottom: 12rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 688rpx;
  height: 86rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;

  .search-left {
    width: 28rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-center {
    margin-left: 22rpx;
  }

  .search-placeholder {
    font-size: 28rpx;
    font-weight: 400;
    color: #7c7c7c;
  }
}

.swipe-action-wrapper {
  background: #ffffff;
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  margin: 14px 17px;
  box-sizing: border-box;
  overflow: hidden;
}

.role-item {
  box-sizing: border-box;
  padding: 16px 24px;

  .role-name {
    color: #101317;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
  }

  .role-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    &-label {
      flex: 0 0 70px;
    }

    &-content {
      flex: 1;
    }
  }
}

.nav-right-image {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15px;
}

.fun-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 3, 3, 0.28);
  z-index: 10000;
}

.fun-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 556rpx;
  height: 444rpx;
  border-top-left-radius: 42rpx;
  border-bottom-left-radius: 42rpx;
  border-bottom-right-radius: 42rpx;
  position: absolute;
  right: 74rpx;
  background-color: #ffffff;
  padding-top: 35rpx;
}

.fun-item {
  width: 185rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 44rpx;
}

.fun-icon {
  width: 92rpx;
  height: 92rpx;
  margin-bottom: 22rpx;
}

.popup-wrapper {
  padding: 11rpx;
  width: 580rpx;
  background-color: #ffffff;
  border-radius: 42rpx;

  .popup-title {
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    color: #000;
    box-sizing: border-box;
    padding: 8px;
  }

  .popup-content {
    box-sizing: border-box;
    padding: 16px;
  }

  .form-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f6f6f6;

    &-label {
      flex: 0 0 70px;
      color: #101317;
    }

    &-content {
      flex: 1;
    }
  }

  .popup-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;

    .popup-action {
      border-radius: 20px;
      border: none;
      width: 230rpx;
    }
  }
}

.submit-icon {
  width: 118rpx;
  height: 118rpx;
  margin-top: 58rpx;
}
</style>
